---
type: tutorial
title: Style deine „Über mich“-Seite
description: |-
  Tutorial: Erstelle deinen ersten Astro-Blog –
  Füge ein Astro-Style-Tag für seitenbezogene Styles hinzu
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Jetzt, da du eine About-Seite mit Inhalten über dich hast, ist es Zeit, sie zu gestalten!

<PreCheck>
  - Elemente auf einer einzelnen Seite zu gestalten
  - CSS-Variablen zu verwenden
</PreCheck>

## Eine einzelne Seite gestalten

Mit Astros eigenen `<style></style>`-Tags kannst du Elemente auf deiner Seite gestalten. Wenn du diesen Tags **Attribute** und **Direktiven** hinzufügst, erhältst du noch mehr Möglichkeiten, das Styling zu steuern.

<Steps>
1. Kopiere den folgenden Code und füge ihn in `src/pages/about.astro` ein:

    ```astro title="src/pages/about.astro" ins={6-11}
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head> 
    ```

    Überprüfe alle drei Seiten in der Browservorschau.
    
    - Welche Farbe hat der Seitentitel auf:

        - Deiner Startseite? <Spoiler>schwarz</Spoiler>
        - Deiner About-Seite? <Spoiler>lila</Spoiler>
        - Deiner Blog-Seite? <Spoiler>schwarz</Spoiler>

    - Die Seite mit der größten Überschrift ist? <Spoiler>deine „Über mich“-Seite</Spoiler>

    :::tip
    Wenn du Farben nicht visuell unterscheiden kannst, kannst du die Entwicklertools deines Browsers verwenden, um die `<h1>`-Titel-Elemente zu inspizieren und die angewandte Textfarbe zu überprüfen.
    :::

2. Füge den Klassennamen `skill` zu den generierten `<li>`-Elementen auf deiner About-Seite hinzu, damit du sie gestalten kannst. Dein Code sollte nun so aussehen:

    ```astro title="src/pages/about.astro" 'class="skill"'
    <p>Meine Fähigkeiten sind:</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>
    ```

3. Füge den folgenden Code zu deinem bestehenden Style-Tag hinzu:

    ```astro title="src/pages/about.astro" ins={6-9}
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>
    ```

4. Öffne erneut deine „Über mich“-Seite im Browser und überprüfe, ob jedes Element in deiner Liste von Fähigkeiten nun grün und fett dargestellt wird – entweder visuell oder mit den Entwicklertools.
</Steps>

## Deine erste CSS-Variable verwenden

Das Astro-`<style>`-Tag kann auch Variablen aus deinem Frontmatter-Skript referenzieren, wenn du die Direktive `define:vars={ {...} }` verwendest. Du kannst **Variablen innerhalb deines Codeblocks definieren** und sie dann **als CSS-Variablen in deinem Style-Tag verwenden**.

<Steps>
1. Definiere eine Variable `skillColor`, indem du sie dem Frontmatter-Skript von `src/pages/about.astro` hinzufügst, wie hier gezeigt:

    ```astro title="src/pages/about.astro" ins={17}
    ---
    const pageTitle = "Über mich";

    const identity = {
      firstName: "Sarah",
      country: "Kanada",
      occupation: "Technische Redakteurin",
      hobbies: ["Fotografie", "Vogelbeobachtung", "Baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Dokumentation schreiben"];

    const happy = true;
    const finished = false;
    const goal = 3;
  
    const skillColor = "crimson";
    ---
    ```

2. Aktualisiere dein vorhandenes `<style>`-Tag so, dass es zuerst die Variable `skillColor` definiert und sie dann innerhalb doppelter geschweifter Klammern verwendet:

    ```astro title="src/pages/about.astro" "define:vars={{skillColor}}" "var(--skillColor)" del={7} ins={8}
    <style define:vars={{skillColor}}> 
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>
    ```

3. Überprüfe deine „Über mich“-Seite in der Browservorschau. Du solltest sehen, dass die Fähigkeiten nun karminrot (crimson) sind – entsprechend der `skillColor`-Variable, die an die Direktive `define:vars` übergeben wurde.
</Steps>

<Box icon="puzzle-piece">

## Probiere es selbst – CSS-Variablen definieren

<Steps>
 1. Aktualisiere das `<style>`-Tag auf deiner „Über mich“-Seite so, dass es wie unten aussieht:

    ```astro title="src/pages/about.astro"
    <style define:vars={{skillColor, fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>
    ```
 
 2. Füge in deinem Frontmatter-Skript alle fehlenden Variablen hinzu, damit dein neues `<style>`-Tag erfolgreich auf deine Liste von Fähigkeiten angewendet wird:
    - Die Textfarbe ist Karminrot (`crimson`)
    - Der Text ist fett
    - Die Listenelemente sind in Großbuchstaben (ALL CAPS)
</Steps>
<details>
<summary>✅ Zeige mir den Code! ✅</summary>

```astro title="src/pages/about.astro" ins={18-19}
---
const pageTitle = "Über mich";

const identity = {
  firstName: "Sarah",
  country: "Kanada",
  occupation: "Technische Redakteurin",
  hobbies: ["Fotografie", "Vogelbeobachtung", "Baseball"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Dokumentation schreiben"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "crimson";
const fontWeight = "bold";
const textCase = "uppercase";
---
```
</details>

</Box>

<Box icon="check-list">
## Checkliste

<Checklist>
- [ ] Ich kann mit einem Astro-`<style>`-Tag CSS-Styles auf eine einzelne Seite anwenden.
- [ ] Ich kann Variablen verwenden, um Elemente auf der Seite zu gestalten.
</Checklist>
</Box>

### Ressourcen
- [Astro-Syntax im Vergleich zu JSX](/de/reference/astro-syntax/#unterschiede-zwischen-astro-und-jsx)
- [Astro-`<style>`-Tag](/de/guides/styling/#styling-in-astro)
- [CSS-Variablen in Astro](/de/guides/styling/#css-variables)
